import { customCompoents } from "andy-ui/src/vue-base/custom-components";
import BaseComponent from "../app/baseComponent";
import isFunction from "lodash/isFunction";

function createAUIMedia(createElement, pos, left, title, content, apppend, extend = '') {
    var className = {
        'aui-media': true,
        'app-message-media': true,        
    };
    className[`app-message-media--${pos}`] = true;

    var aside = createElement(
        'div',
        {
            'class': 'aui-layout__item'
        },
        left
    );

    var gutter = createElement(
        'div',
        {
            'class': 'aui-layout__item app-message-media__rowgutter'
        }
    );
    
    var body = createElement(
        'div',
        {
            'class': 'aui-layout__item aui-media__body'
        },
        [
            createElement(
                'div',
                {
                    'class': 'app-message-media__gutter'
                }
            ),
            createElement(
                'div',
                {
                    'class': 'app-message-media__title'
                },
                [
                    createElement(
                        'div',
                        {
                            attrs: {
                                'app-inner': true
                            }
                        },
                        title
                    )
                ]
            ),                                
            createElement(
                'div',
                {
                    'class': 'app-message-media__extend'
                },
                extend
            ),
            createElement(
                'div',
                {
                    'class': 'app-message-media__gutter'
                }
            ),
            createElement(
                'div',
                {
                    'class': 'app-message-media__body'
                },
                [
                    createElement(
                        'div',
                        {
                            'class': 'app-message-media__content'
                        },
                        [
                            createElement(
                                'div',
                                {
                                    attrs: {
                                        'app-inner': true
                                    }
                                },
                                content
                            ),
                            createElement(
                                'div',
                                {
                                    attrs: {
                                        'app-append': true
                                    },                                                      
                                },
                                apppend
                            )                                                
                        ]
                    )
                ]
            )                                                                                                                                   
        ]
    ); 

    var inner = [];

    if (pos === 'left') {
        inner = [
            aside,
            gutter,
            body           
        ];
    } else {
        inner = [
            body,
            gutter,
            aside
        ];
    }

    return [
        createElement(
            'div',
            {
                'class': className
            },
            [
                createElement(
                    'div',
                    {
                        'class': 'aui-layout'
                    },
                    inner                  
                )
            ]
        ),
    ]   
}

class BAppMessage extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            data: {
                type: Object,
                default: {
                    pos: "left"
                }
            }
        };
        this.render =  function (createElement) {
            var self = this;

            var content = "";
            if (isFunction(self.data.content)) {
                content = self.data.content(createElement, self);
            } else {
                content = self.data.content;
            }

            return createElement(
              `div`,   // tag name 标签名称
              {
                'class': name,
              },
              createAUIMedia(
                  createElement,
                  self.data.pos, 
                  [
                    createElement(
                        'img',
                        {
                           'class': 'b-app-rounded-circle app-message-media__logo',
                           attrs: {
                               src: self.data.src
                           }
                        }
                    )
                  ],
                  self.data.title,
                  content,
                  self.data.append
              )          
            )
        };
    }
}


customCompoents.define("b-app-message", BAppMessage);
